<h3 class="first">Single</h3>
<p-listbox [options]="cities" [(ngModel)]="selectedCity"></p-listbox>
<p>Selected City: {{selectedCity}}</p>
<h3>Advanced (Multiple, Checkbox and Filter)</h3>
<p-listbox [options]="cities" [(ngModel)]="selectedCities" multiple="multiple" checkbox="checkbox" filter="filter"></p-listbox>
<p>Selected Cities: <span *ngFor="let c of selectedCities" style="margin-right: 10px">{{c}}</span></p>
<h3>Content</h3>
<p-listbox [options]="cars" [(ngModel)]="selectedCar" [style]="{'width':'190px','max-height':'250px'}">
    <ng-template let-car pTemplate="item">
        <div class="ui-helper-clearfix">
            <img src="app/resources/demo/images/car/{{car.label}}.gif" style="display:inline-block;margin:5px 0 0 5px" width="48">
            <span style="font-size:20px;float:right;margin:15px 10px 0 0">{{car.value}}</span>
        </div>
    </ng-template>
</p-listbox>
<p>Selected Car: {{selectedCar}}</p>
<button type="button" (click)="selectedCar=null" pButton icon="fa-close" label="Clear Selected Car"></button>
